<template>
	<view v-if="expertDetail">
		<view class="send-expert-head-con">
			<view class="send-expert-head">
				<image class="send-expert-head-pic" :src="expertDetail.headPortrait" mode=""></image>
			</view>
			<view class="">
				<view class="send-expert-name">
					<text class="send-expert-name-name">{{expertDetail.userInfo.realName}}</text>
					<text class="send-expert-name-title">{{expertDetail.topTitle || expertDetail.jobTitle}}</text>
				</view>
				<view class="send-expert-name send-flex">
					<block v-for="(item,index) in research" :key="index">
						<text class="send-expert-area">{{item}}</text>
					</block>
				</view>
			</view>

		</view>
		<view class="send-detail-con">
			<view class="send-expert-tip">
				咨询内容
			</view>
			<view class="send-textarea-contain">
				<textarea v-model="note" class="send-textarea" placeholder-style="font-size:24upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(168,168,168,1);"
				 placeholder="请用10-500字详细描述您的问题和需求，等待专家回复" />
				</view>
			<view class="send-mon-total">
				<text class="send-mon-total-f">¥</text>
				<text class="send-mon-total-z">{{parseFloat(picTxtItem.price).toFixed(2)}}</text>
				<text class="send-mon-total-t">元/次</text>
			</view>
			<view class="tel-tips">
				<view class="tel-tips-title tel-tips-font">
					提示：
				</view>
				<view class="tel-tips-title1 tel-tips-font">
					1、成果转化平台确保您的隐私安全，请放心提交。
				</view>
				<view class="tel-tips-title1 tel-tips-font">
					2、一次咨询的实效为48小时，在48小时内随时和咨询专家（专家对话上限为10次）。
				</view>
				<view class="tel-tips-title1 tel-tips-font">
					3、专家未回复可随时退款。
				</view>
			</view>
			<view @click="confirm" class="tel-confirm">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account:[
					4,8,12,36
				],
				id:'',
				currentIndex:0,
				otherMoney:188,
				picTxtItem:null,
				note: '',
				expertDetail:null
			}
		},
		computed:{
			research(){
				if(this.expertDetail){
					return this.expertDetail.research&&this.expertDetail.research.split(',');
				}
				return [];	
			}	
		},
		methods: {
			chooseSend(index){
				this.currentIndex = index;
			},
			confirm(){
				if(this.note.length === 0){
					uni.showToast({
						title:'请输入咨询内容',
						icon:'none'
					})
					return;
				}
				const _self = this;
					uni.navigateTo({
						url:`/pagesA/text-result/text-result?price=${this.picTxtItem.price}&mainId=${this.expertId}&note=${this.note}&linkUserId=${this.linkUserId}&name=${this.expertDetail.userInfo.realName}&headPortrait=${this.expertDetail.headPortrait}` 
					})
				// this.$request.post({
				// 	url: 'mallInfo/editExpert',
				// 	data: [
				// 			{
				// 				price: this.picTxtItem.price,
				// 				typeId: 2,
				// 				mainId: this.linkUserId,
				// 			}
				// 		],
				// }).then(res => {
				// 	const expertProductItem = res[0];
				// 	const { mallId, typeId } = expertProductItem;
				
				// 	this.$request.post({
				// 		url: 'expertOrder/add',
				// 		data: {
				// 				price: this.picTxtItem.price,
				// 				note: this.note,
				// 				specs: typeId,
				// 				mallId,
				// 			}
				// 	}).then(res => {
				// 		//预约 主键
				// 		this.subscribeId = res;
				// 		this.$request.post({
				// 			url: 'payOrder/addOrder',
				// 			data: { mallNum: 1, payType: '21', userInfoId: this.linkUserId, mallId,remarks:'1' }
				// 		}).then(res => {
				// 			// 更新订单
				// 			_self.updateOrder(res);
				// 			// _self.pay(res);
				// 			uni.navigateTo({
				// 				url:`/pages/text-result/text-result?price=${this.picTxtItem.price}&mainId=${mallId}&note=${this.note}$linkUserId=${this.linkUserId}$name=${this.expertDetail.userInfo.realName}` 
				// 			})
				// 		})
				// 	})
				// })
			},
			updateOrder(res){
				const params = {
					id: this.subscribeId,
					orderCode: res.orderCode,
					orderId: res.orderId
				}
				console.log('params', params);
				console.log('res', res);
				this.$request.post({
					url: 'expertOrder/updateOrder',
					data: params
				}).then(res => {
					console.log('updateOrder res', res);
				})
			},
			/**
			 * @description 吊起微信支付
			 * @param {Object} orderInfo {订单信息}
			 */
			pay(orderInfo){
				const {payMap} = orderInfo;
				const {nonceStr,sign,signType,timeStamp} = payMap;
				let _self = this;
				console.log("===pic-text-consult====="+`/pagesA/chat-contactlist/fee-chat?userId=${_self.linkUserId || 85}&expertId=${_self.expertId}&type=0&finished='true'`);
				
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: timeStamp,
				    nonceStr: nonceStr,
				    package: payMap.package,
				    signType:signType,
				    paySign: sign,
				    success: function (res) {
						uni.navigateTo({
						//	url:`/pagesA/chat-contactlist/fee-chat?userId=${_self.linkUserId || 85}` ,
							url:`/pagesA/chat-contactlist/fee-chat?userId=${_self.linkUserId}&expertId=${_self.expertId}&type=0&finished='true'`
						})
				    }
				});
			},
			loadAskInfo(){
				//获取图文咨询 信息
				this.$request.get({
					url: 'mallInfo/selectExpert',
					data: {
						"id": this.linkUserId
					},
				}).then(priceItems => {
					if (priceItems && priceItems.length !== 0) {
						//获取到 图文咨询
						const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
						if (picTxtItems.length !== 0) {
							this.picTxtItem = picTxtItems[0];
						}
					}
				}, res => {});
			},
			loadExpertInfo(){
				this.$request.get({
					url: 'ExpertInfo/selectExperById',
					data: {
						expertId:this.expertId
					},
				}).then(res => {
					this.expertDetail = res;
				});
			},
		},
		onShow() {
			this.loadAskInfo();
			this.loadExpertInfo();
		},
		onLoad(option) {
			this.expertId = option.expertId;
			this.linkUserId = option.linkUserId;
			this.research = option.research&&option.research.split(',');
		}
	}
</script>

<style scoped>
	.send-expert-head-con{
		display: flex;
		/* flex-direction: column; */
		/* justify-content: center; */
		align-items: center;
		margin-top: 98upx;
		margin-left: 30upx;
		margin-right: 30upx;
		border-bottom: 1upx solid #EDEDED;
		padding-bottom: 28upx;
	}
	.send-expert-head{
		width: 135upx;
		height: 135upx;
		border-radius: 50%;
		border: 5upx solid rgba(255,255,255,1);
		box-shadow:0px 2px 14px 0px rgba(0,0,0,0.08);
		margin-right: 25upx;
	}
	.send-expert-head-pic{
		width: 135upx;
		height: 135upx;
		border-radius: 50%;
	}
	.send-expert-name{
		/* margin-top: 34upx; */
	}
	.send-expert-tip{
		font-size:24upx;
		font-family:SourceHanSansCN-Normal,SourceHanSansCN;
		font-weight:400;
		color:rgba(85,85,85,1);
		line-height: 1;
		margin-top: 34upx;
	}
	.send-detail-con{
		margin: 0upx 0upx 27upx 0upx;
		padding: 35upx;
	}
	.send-detail-con-mon{
		display: flex;
		justify-content: space-between;
	}
	.send-detail-con-mon-item{
		width:135upx;
		height:139upx;
		background:linear-gradient(133deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 59%,rgba(231,239,254,1) 100%);
		box-shadow:0px 0px 12upx 0px rgba(148,190,252,0.3);
		border-radius:10upx;
		opacity:0.5;
		font-size:22upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(42,125,250,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
	}
	.send-detail-con-mon-item-active{
		width:135upx;
		height:139upx;
		background:linear-gradient(360deg,rgba(42,125,250,1) 0%,rgba(78,148,255,1) 100%);
		box-shadow:0px 0px 12upx 0px rgba(148,190,252,0.3);
		border-radius:10upx;
		font-size:22upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
	}
	.send-other-contain{
		position: relative;
	}
	.send-other-r{
		position: absolute;
		right: 25upx;
		top: 20upx;
		font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(152,152,152,1);
	}
	.send-other-f{
		
		position: absolute;
		left: 25upx;
		top: 20upx;
		font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.send-other{
		background:rgba(252,252,252,1);
		border-radius:10upx;
		height:27upx;
		border:1upx solid rgba(230,230,230,1);
		padding: 20upx 51upx;
		margin-top: 20upx;
		/* font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(152,152,152,1); */
	}
	.send-textarea{
		background:rgba(255,255,255,1);
		border-radius:10upx;
		width: 100%;
		box-sizing: border-box;
		height: 248upx;
		padding: 26upx 18upx;
		border:1upx solid rgba(230,230,230,1);
		margin-top: 40upx;
	}
	.tel-confirm {
		/* margin: 77upx 30upx 40upx 30upx; */
		margin-top: 40upx;
		border-radius: 44upx;
		height: 88upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, rgba(70, 144, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		box-shadow: 0px 4upx 18upx 0px rgba(126, 178, 255, 0.7);
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
	.send-expert-name-name{
		font-size:28upx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(51,51,51,1);
		padding-right: 18upx;
	}
	.send-expert-name-title{
		font-size:24upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(34,34,34,1);
	}
	.send-flex{
		display: flex;
		flex-wrap: wrap;
		margin-top: 24upx;
	}
	.send-expert-area{
		padding: 4upx 12upx;
		font-size:22upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(97,97,97,1);
		background:rgba(241,242,245,1);
		border-radius:8px;
		opacity:0.85;
		margin-right: 12upx;
		margin-bottom: 8upx;
	}
	.tel-tips {
		padding: 8upx 0 38upx 0;
		margin-top: 24upx;
	}
	
	.tel-tips-font {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(133, 133, 133, 1);
		line-height: 1.2;
	}
	.tel-tips-title {
		margin-bottom: 14upx;
	}
	
	.tel-tips-title1 {
		margin-bottom: 14upx;
	}
	.send-mon-total{
		text-align: end;
		margin-top: 15upx;
	}
	.send-mon-total-f{
		font-size:26upx;
		font-family:ArialMT;
		color:#DE5A02;
	}
	.send-mon-total-z{
		font-size:38upx;
		font-family:ArialMT;
		color:#DE5A02;
	}
	.send-mon-total-m{
		font-size:26upx;
		font-family:ArialMT;
		color:#DE5A02;
	}
	.send-mon-total-t{
		font-size:26upx;
		font-family:ArialMT;
		color:#DE5A02;
	}
</style>
